<template>
    <div class="login">
        <div class="wrap" :style="{height:height+'px'}">
            <img src="../../img/logo.png"
                 :class="{webImg:platform!=='wechat',weChatImg:platform==='wechat'}"
                 :style="{marginTop:platform==='mobile'?statusHeight+30+'px':'30px'}"/>
            <div class="card">
                <div class="login-card">
                    <mt-field placeholder="用户名/手机号" v-model="user.name" style="margin-bottom: 10px"></mt-field>
                    <mt-field placeholder="请输入密码" type="password" v-model="user.password"></mt-field>
                    <mt-button style="margin-top: 20px;background-color: #2699FB;color: #fff;" @click="clickLogin">登录
                    </mt-button>
                    <mt-button plain @click="$router.push({name:'index'})"
                               style="border: solid 1px rgba(112, 112, 112, 1);color: rgba(112,112,112,.8)">返回首页
                    </mt-button>
                    <p>
                        <router-link to="/passwordFind" style="padding-left: 10px;color: #C7C7C7;">忘记密码</router-link>
                        <span style="color: rgba(255, 255, 255, .8)">|</span>
                        <router-link to="/register" style="padding:0 10px;color: #C7C7C7;">立即注册</router-link>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                height: app.config.setting.height.display,
                platform: app.config.setting.platform,
                statusHeight: app.config.setting.statusHeight,
                user: {
                    name: this.$route.params.name ? this.$route.params.name : '',
                    password: ''
                }
            }
        },
        methods: {
            clickLogin() {
                let plusLoading;
                let name = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
                    password = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`]+$)[,\.#%'\+\*\-:;^_`0-9A-Za-z]{6,20}$/;
                if (!this.user.name || !this.user.password) {
                    this.$toast('请输入用户名和密码');
                    return;
                }
                if (!name.test(this.user.name)) {
                    this.$toast('手机号输入错误,请重新输入');
                    return;
                }
                if (!password.test(this.user.password)) {
                    this.$toast('密码格式错误，请重新输入');
                    return;
                }
                if (app.config.setting.platform === 'mobile') {
                    window.plus.nativeUI.showWaiting("等待中...");
                } else {
                    this.$indicator.open({
                        spinnerType: 'fading-circle'
                    });
                }
                app.ajax.post(app.config.setting.serverMobile + app.config.api.mobile.login, {
                    name: this.user.name,
                    password: app.util.md5(this.user.password)
                }, (res) => {
                    if (this.platform === 'mobile') {
                        app.util.localStorage('token', res.data.token);
                        app.util.localStorage('tokenTime', new Date().getTime());
                    }
                    app.util.sessionStorage('token', res.data.token);
                    setTimeout(() => {
                        if (app.config.setting.platform === 'mobile') {
                            window.plus.nativeUI.closeWaiting();
                        } else {
                            this.$indicator.close();
                        }
                        this.$router.push({name: 'index'});
                    }, 600)
                })
            }
        }
    }
</script>
<style>
    .login {
        background-image: url("../../img/bg_login.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -webkit-background-size: 100% 100%;
        height: 100%;
        z-index: 1;
    }

    .login:after {
        content: "";
        background: inherit;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }

    .login .wrap {
        position: absolute;
        left: 0;
        top: 0;
        /*transform: translate(-50%, -50%);*/
        /*-webkit-transform: translate(-50%, -50%);*/
        width: 100%;
        text-align: center;
        z-index: 11;
    }

    .login a:-webkit-any-link {
        color: rgba(255, 255, 255, .8);
    }

    .login .card {
        margin: 0;
        width: 100%;
    }

    .login .login-card {
        padding: 15px 20px 15px 20px;
        background-color: #fff;
        box-shadow: 0px 0px 30px 5px rgba(0, 0, 0, 0.16);
        border-radius: 10px;
        margin: 0 45px;
    }

    .login .webImg {
        margin: 30px 0;
        width: 150px;
    }

    /*.login .mobileImg {*/
    /*margin: 40px 0 30px 0;*/
    /*width: 150px;*/
    /*}*/

    .login .weChatImg {
        margin: 25px 0;
        width: 100px;
    }

    .login input {
        background-color: inherit;
    }

    .login .mint-cell {
        background: inherit;
    }

    .login .mint-cell-wrapper {
        background-position: bottom left;
        background-origin: padding-box;
        background-image: none;
        border-bottom: solid 1px rgba(199, 199, 199, 1);
    }

    .login .mint-field .mint-cell-value {
        margin-right: 0;
        width: 100%;
    }

    .login .mint-button--primary {
        width: 100%;
    }

    .login .mint-button {
        /*height: 48px;*/
    }

    .login .mint-button--default {
        width: 100%;
        border-radius: 30px;
        margin: 10px 0;
    }

    .login p {
        font-size: 12px;
    }
</style>

